M. Adlan Ramly
Interaction Designer & UX Researcher

Coffee Talk

June - September 2018
Role: UX/UI Engineer Intern
Research Methods: User Surveys
Collaborator(s):
Mohammad Fahmi (Writer & Game Designer), Dio Mahesa (Artist), Hendry Roesly (Artist),
Fredrik Lauwrensius (Programmer), Jovan Anggara (Programmer), Andrew Jeremy (Composer),

Featured in Kotaku, Rock, Paper, Shotgun, Paste Magazine
Released on itch.io and Steam

Project Overview

Coffee Talk is an interactive visual novel about listening to people’s problems and helping them by serving a warm drink out of the ingredients you have as a barista of a coffee shop. It is a game that tries to depict our lives as humanly as possible, while having a cast that is more than just humans. The game features visual aesthetics that are inspired by 90s anime, classic pixel art adventure games, and lo-fi chill hop music.

Goal

To help the Coffee Talk team’s development by improving the user interface, user experience, general usability of the game as well as gathering user feedback since the game was still in the early phase of development

Features

  • Tales of people around the alternative Seattle, a city where elves, orcs, mermaids, and other fantasy creatures coexist together with humans in a modern world
  • Branching story lines where the decisions do not come from the dialogue options you choose, but through how you treat and serve the customers of your café
  • 90s anime inspired pixel art visuals and chill vibes inducing color palette to help you immerse yourself in the game’s world
  • Selection of jazzy and lo-fi music to accompany the late night warm drinks and talks activities
  • An experience to make you think, feel, and help rest your body and soul

Concept Development

Ambience

Ambience is an important aspect in a game that allows players to be fully immersed into the experience.

The best way to craft this atmosphere is through Color Psychology. Color influences human perceptions & emotions which can affect a person’s mental or physical state. However, keep in mind that colors might work differently for people from different culture and backgrounds.

Color Psychology builds up Coffee Talk’s ambience. Coffee Talk uses a brownish color palette that emits the game’s relaxing, warm, and casual atmosphere.

Skeuomorphism

Skeuomorphism is a design of an object that inherits the physical appearance of their real-world counterparts. It was highly popularized as Apple’s design system during Steve Jobs’ era.

While skeuomorphism is considered outdated in interface design, as designs are moving toward flat and modern aesthetics, it is still prominent in games. The brewing system has a skeuomorphic UI.

The aspect of taking ingredients from your cupboard into your coffee machine which emulates the experience of being a coffee shop barista who serves coffee to their customers whichallows more players to be more experimental in combining ingredients.

Suppose the system’s user interface is designed in a very practical, yet efficient manner: a drop-down menu that represents each component.

Yes, it is more efficient and reduces cognitive load, but does it still emanate the “feel” of brewing a real coffee? Do you still want to experiment different kinds of coffee? Does it break the immersion of the coffee-making experience?

User Testing

Before I joined the team, they had just received survey results from their initial feedback survey which contains a lot of useful questions regarding each aspect of the game which includes writing, art direction, game mechanic, user interface, and music.

The survey also asks what are their first impressions of the game, what they think & feel about the experience, and what improvements could be made for the following iterations.

Based on 27 respondents, I checked their initial thoughts about the game, their current difficulties with navigation, and their suggestions to improve the current existing user interface and experience design.

Design Improvements

Flow & Navigation

Before

"The interface is okay, probably a little clearer direction on the brewing mechanism. I also had no idea what drink I just made”

  • You have to select “Trash It” before you can brew another coffee.
  • Most users will press the “Reset” button first instead of selecting “Trash It” on the right panel.
  • This is caused by the lighting on the previous panel, which it seemed to look like it is still active.

After

  • When the brewing session has just finished, the lighting dims on the previous panel to imply the “Reset” & “Brew” buttons are inactive.
  • I created icons to easily distinguish between choices and prevent mistakes in making choices.
  • When hovering on a choice, it will bounce once and the icon gets a bit larger.
  • Players can see the name of the drink they brewed.

Customer Page in The Notebook

Before

“The story needs depth and I want to know more about each character’s backstory. Would be great if I could keep track of my progress if it’s going to be a branching story”

The notebook is a feature where players can read recipes and learn more about the cafe visitors.

When designing this feature, I asked myself:

  • “What do the players want to know about a character?” When I meet a person for the first time, I want to know their name and their face.
  • After recognizing a person, I want to know what they associate, specifically with their hobbies and interests.
  • After I know them for a long time, I can learn about their backstories.

After

  • The name of the character is the title of the entry, followed by their portrait on the top left corner, their race, and their favorite things.
  • 3 snippets of paragraphs of their backstor which will be unlocked throughout the game if the player is consistently correct in brewing drinks based on each character’s request.
  • After planning the layout on Photoshop, the layout is ready to be implemented on Unity.

Post-Internship

On later iterations after my internship ends, the notebook is replaced by a smartphone, which allows players not only see recipes and customers, but also check the game’s current events with the News application and change the background music with the Music Player application.

The customers are now presented as user profiles on a social media application.

Controls

Before

“The controls at the beginning wasn't really clear”

  • The studio is currently planning to publish the game for multiple platforms: PC & Nintendo Switch.
  • Maintaining an optimal, consistent, and ergonomic controls for different ports is very important.
  • I decided to create one universal controller interface instead of creating different controller images for each consoles.
  • If players are unsatisfied with the current controls, they can change it to their needs for accessibility.

After

I created a controller layout document that contains controller mappings of different consoles, which serves as a guide for the programmers to map these functionalities to each key of the controller.

Character Personality Variation

“There is not much variation on the characters’ personalities, would be more interesting if I could talk to different kinds of people in this game”

Despite my role not being a writer for the game, I suggested utilizing MBTI (Myers Briggs Type Indicator), a system of how people perceive the world and make decisions which could give suggestions on how to create a diverse cast based on their personalities.

The Myers Briggs Type Indicator Scale might not be the best tool for identifying a real person’s personality type since it lacks identifying cognitive functions, but it is great as a tool for fictional character creation.

We created a table by mapping out each characters with their desired personality. It turned out to be a great approach in outlining different character personality types.

After mapping out each character’s personality, we decided to create an alignment chart where the characters are seen in a more general perspective from their emotional tendencies and decision making.

Tutorial System

“I was very confused about what I was expected to do at the beginning, would have been useful to have some directions to the brewing station better.”

A tutorial system is useful for navigating new players to understand concepts of the game. A lack of tutorial would cause new players unable to play the game properly.

  • I have an idea of executing the tutorial as a diegetic monologue of the barista and pointers for navigating the buttons.
  • Diegetic monologues would be perfect for this game because it retains the immersion through in-game narratives instead of a regular tutorial of how-to-do-tasks.
  • Eventually, the recipes for all drinks are not shown in a monologue because experimentation is a part of the gameplay.
  • Unfortunately, I couldn’t finish this task because my internship time is over.

Conclusion

Weeks after my internship has ended, the demo has been released on itch.io and Steam. The game received a lot of new feedback and reviews from players:

“Talk about soothing games! Makes me feel like everything can be solved by combining the right ingredients into a warm beverage, & I want more!”
“This was a cool game so far! Great job! It is really chill to play with a great premise! The writing, art style, and music all fit together nicely.”
“This game is relaxing and has a great storyline about the characters and the city!”

Toge Productions was also invited to attend 4 international game conferences, including PAX West & Busan Indie Connect.

What I Learned

  • I am really grateful that I was working with a lot of friendly and inspirational people.
  • I got the chance to apply my UX research skills and provide feedback for high quality upcoming games before they are released.
  • I learned the best practices in creating a well-structured script organization in Unity, a technical art preference guide, and a comprehensive game design document.
  • I learned a lot about game development & production, not just in theory but also how the industry works.

"When it comes to building user interfaces in games, not only functionality or aesthetics come into play. It needs to convey an experience that fits the atmosphere with determined stylistic choices."

Read More